<template>
    <div class="out_box">
        <headers />

        <div class="relative content_box">
            <div class="info_box mb_20 mt_20">
                <img class="img" src="@assets/imgs/personal/avator.png" />
                <div class="content">
                    <p>
                        <span class="name">{{ userDATA.userName }}</span>
                        <span class="expiration_date ml_20">VIP有效期至：{{ userDATA.registerDate }}</span>
                    </p>
                    <p class="user_id">{{ 'UID号：' + userDATA.memberid }}</p>
                    <div class="progress_box cl">
                        <span class="f_l">成长值 >></span>
                        <span class="f_r">913/1826</span>
                        <v-progress-line class="progress theme_bg" :percent="50" :show-info="false" :stroke-width="7"></v-progress-line>
                    </div>
                </div>
                <div class="others">
                    <p class="mt_14">
                        <span class="value bold">0.00 </span>Haha
                    </p>
                    <p class="text">
                        <i class="iconfont mr_4">&#xe7ac;</i>质押量
                    </p>
                    <div class="btn_box">
                        <div class="btn1 mr_14">质押</div>
                        <div class="btn2">解锁</div>
                    </div>
                </div>
            </div>
            <div class="form_box mb_20">
                <personal-menu />
                <div class="content_case">
                    <div class="vip_bg relative mb_20" v-show="hasMember">
                        <img class="img" src="@assets/imgs/personal/vip_bg.jpg" />
                        <div class="content">
                            <p class="title">GRINOK会员 尊享16大专属特权</p>
                            <p class="text bold">现在开通GRINOK会员立享7天免费算力</p>
                            <div class="btn pointer">永久升级</div>
                        </div>
                    </div>
                    <span :is="personalMenuKEY.src" @toggleMenu="toggleContent"></span>
                </div>
            </div>
        </div>
        
        <footers />
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';
    import '@common/adaptable.min.js'

    export default {
        name: "PersonalCenter",
        components: {
            Headers,
            Footers,
            PersonalMenu: (resolve) => require(['@components/personal_menu/personal_menu.vue'],resolve),
            BasicInfo: (resolve) => require(['./my/basic_info.vue'],resolve),
            Authentication: (resolve) => require(['./my/authentication.vue'],resolve),
            Wallet: (resolve) => require(['./property/wallet.vue'],resolve),
            GetCash: (resolve) => require(['./property/get_cash.vue'],resolve),
            Recharge: (resolve) => require(['./property/recharge.vue'],resolve),
            BillDetails: (resolve) => require(['./property/bill_details.vue'],resolve),
            MyTeam: (resolve) => require(['./team/my_team.vue'],resolve),
            QRcode: (resolve) => require(['./team/QRcode.vue'],resolve),
            MemberList: (resolve) => require(['./team/member_list.vue'],resolve),
            DistributionDesc: (resolve) => require(['./team/distribution_desc.vue'],resolve),
            HashRateOrder: (resolve) => require(['./order/hash_rate.vue'],resolve),
            CoinHahaOrder: (resolve) => require(['./order/coin_haha.vue'],resolve),
            TeamOrder: (resolve) => require(['./order/team.vue'],resolve),
            // WorkOrders: (resolve) => require(['./help/work_orders.vue'],resolve),
        },
        data: function() {
            return {
                hasMember: false,
                noticeData: [
                    { id: 1, text: '猛击者' },
                    { id: 2, text: '付款购买' },
                    { id: 3, text: '付款' },
                    { id: 4, text: '猛击者' }
                ],
                columns:[
                    { title:"歌名", field:'name', width: '10%' },
                    { title:"时长", field:'time', width: '25%' },
                    { title:"歌手", field:'singer', width: '25%' },
                    { title:"专辑", field:'album', width: '20%' },
                ],
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            },
            personalMenuKEY: function() {
                const personalMenuKEY = this.$store.state.personalMenuKEY;
                return personalMenuKEY;
            }
        },
        methods: {
            toggleContent: function(params) {
                // 动态传递组件名称
                // this.contentKEY = params.src;
                let oldQuery = this.$router.history.current.query;
                let path = this.$router.history.current.path;
                let newQuery = JSON.parse(JSON.stringify(oldQuery));
                newQuery = Object.assign(newQuery, oldQuery, params);
                this.$router.replace({ path, query: newQuery});
                // 是否显示会员广告
                const showMemberList = ['BasicInfo', 'Wallet'];
                this.hasMember = showMemberList.indexOf(params.KEY) > -1 ? true : false;
            }
        },
        mounted: function() {
            this.userDATA.registerDate = $.$calcDate(this.userDATA.registrationTime, 86400 * 180, [true]);
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .content_spacing;
    }
    .info_box{
        .flex_row_wrap;
        padding: 24px;
        background-color: white;
        .box_shadow;
        .img{
            width: 140px;
            height: 140px;
        }
        .content{
            flex: 4;
            margin-left: 24px;
            .name{
                font-size: 22px;
            }
            .expiration_date{
                font-size: 10px;
                color: #999;
            }
            .user_id{
                margin-top: 6px;
                font-size: 10px;
            }
            .progress_box{
                margin-top: 38px;
                font-size: 10px;
                color: @theme_color;
                .progress{
                    width: 100%;
                }
            }
        }
        .others{
            margin-left: 24px;
            padding: 0 60px;
            text-align: center;
            border-left: 1px solid #EDEDED;
            .value{
                font-size: 20px;
                color: @color_orange;
            }
            .text, .text .iconfont{
                font-size: 10px;
                color: #999;
            }
            .btn_box{
                margin-top: 50px;
                >div{
                    display: inline-block;
                    padding: 5px 15px;
                    font-size: 10px;
                    line-height: 14px;
                    color: white;
                    border-radius: 34px;
                    cursor: pointer;
                }
                .btn1{
                    background: linear-gradient(139deg, #ff9100 0%, #ff3c00 100%);
                }
                .btn2{
                    background:linear-gradient(139deg,#56CCF2 0%,#2948FF 100%);
                }
            }
        }
    }
    .form_box{
        display: flex;
    }
    .content_case{
        flex: 4;
        margin-left: 20px;
        overflow: hidden;
        .vip_bg{
            .content{
                .title{
                    position: absolute;
                    top: 28%;
                    left: 18%;
                    font-size: 0.07rem;
                    color: #999;
                }
                .text{
                    position: absolute;
                    top: 48%;
                    left: 18%;
                    font-size: 0.11rem;
                    color: white;
                }
                .btn{
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto 6%;
                    width: 0.86rem;
                    height: 0.2rem;
                    line-height: 0.2rem;
                    font-size: 0.08rem;
                    text-align: center;
                    color: white;
                    border-radius: 34px;
                    background-color: @theme_color;
                }
            }
        }
    }
</style>
